<template>
    <div class="app-container">
      <avue-crud ref="crud"
                 :page="page"
                 :data="dataList"
                 :option="tableOption"
                 :table-loading="dataListLoading"
                 @search-change="searchChange"
                 @refresh-change="refreshChange"
                 @on-load="getDataList">
        <template slot="menuLeft">
          <el-button type="primary"
                     icon="el-icon-plus"
                     size="small"
                     @click.stop="addOrUpdateHandle()">新增</el-button>
        </template>

        <template slot-scope="scope"
                  slot="valueList">
          <el-tag v-for="(item,index) in scope.row.valueList" class="m-tag"
                  :key="index">{{item}}</el-tag>
        </template>

        <template slot-scope="scope"
                  slot="menu">
          <el-button type="primary"
                     icon="el-icon-edit"
                     size="small"
                     @click.stop="addOrUpdateHandle(scope.row)">编辑</el-button>

          <el-button type="danger"
                     icon="el-icon-delete"
                     size="small"
                     @click.stop="deleteHandle(scope.row.propId)">删除</el-button>
        </template>
      </avue-crud>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible"
                     ref="addOrUpdate"
                     @refreshDataList="getDataList"></add-or-update>
    </div>
</template>

<style>
  .m-tag{
    margin: 0 5px;
  }
</style>

<script>
  import AddOrUpdate from './add-or-update'
  import { tableOption } from '@/crud/mall/prodProp'
  import { getPageList } from '@/api/mall/prodProp'
    export default {
      components: {
        AddOrUpdate
      },
        data() {
            return {
              page:{
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
              },
              dataList:[],
              tableOption: tableOption,
              addOrUpdateVisible: false,
              dataListLoading: false
            }
        },
      methods:{
        getDataList:function (page, params,done) {
          this.dataListLoading = true
          getPageList(Object.assign(
            {
              current: page == null ? this.page.currentPage : page.currentPage,
              size: page == null ? this.page.pageSize : page.pageSize
            },
            params
          )).then(res => {
            this.dataList = res.records
            this.page.total = res.total
            this.dataListLoading = false
            if(done){
              done()
            }
          })
        },
        searchChange:function (params,done) {
          this.getDataList(this.page, params,done)
        },
        refreshChange:function () {
          this.getDataList(this.page)
        },
        addOrUpdateHandle:function(row){
          console.log(row)
          this.addOrUpdateVisible = true
          this.$nextTick(() => {
            this.$refs.addOrUpdate.init(row)
          })
        },
        deleteHandle:function (id) {

        }
      }
    }
</script>
